﻿@model IFDB.ViewModels.PageViewModels.LeagueViewModel

@{
    ViewBag.Title = "IFDB - League tables";
}

<div class="clear"></div>
<div class="grid_7">
    <table>
        <tr>
            <td style="vertical-align: middle;">
                <input type="image" src="~/Content/images/expander.png" id="filterCompetitionButton" width="25" height="25" title="Competition filter" alt="Competition filter" />
            </td>
            <td style="vertical-align: middle;">
                <h4>@Model.Competition.CompetitionName</h4>
            </td>
        </tr>
    </table>

    @Html.Partial("~/Views/Shared/League/_FullLeagueTable.cshtml", Model.LeagueTableViewModel)
</div>

<div class="grid_5">

    @using (var t = Html.JQueryUI().BeginTabs())
    {
        t.Tab("Results", "results");
        t.Tab("Fixtures", "fixtures");

        using (t.BeginPanel())
        {
            <div id="MatchList">
                @Html.Partial("~/Views/Shared/Match/_CompetitionMatchList.cshtml", Model.CompetitionMatchListViewModel)
            </div>
        }

        using (t.BeginPanel())
        {
            <div id="FixtureList">
                @Html.Partial("~/Views/Shared/Match/_CompetitionFixtureList.cshtml", Model.CompetitionFixtureListViewModel)
            </div>
        }
    }
</div>

@using (Html.JQueryUI().Begin(new Dialog().AutoOpen(false).TriggerClick("#filterCompetitionButton").Modal(true).Width(400).Height(250).Resizable(false).Title("Competition filter")))
{
    using (Html.BeginForm("Index", "League", FormMethod.Get))
    {
        <fieldset>
            <legend />
            <ul>
                <li>
                    @Html.Label("CompetitionId", "Competition", new { @class = "filter" })
                    @Html.DropDownList("CompetitionId", Model.CompetitionList, new { @class = "filter" })
                </li>
                <li>
                    @Html.LabelFor(m => m.SeasonId, "Season", new { @class = "filter" })
                    @Html.DropDownListFor(m => m.SeasonId, Model.SeasonList, new { @class = "filter" })
                </li>
                <li>
                    @Html.LabelFor(m => m.StartDate, "From", new { @class = "filter" })
                    @Html.JQueryUI().DatepickerFor(m => m.StartDate).DateFormat("d MMMM yyyy").MinDate(Model.StartDate).MaxDate(Model.EndDate).AutoSize(true)
                </li>
                <li>
                    @Html.LabelFor(m => m.EndDate, "To", new { @class = "filter" })
                    @Html.JQueryUI().DatepickerFor(m => m.EndDate).DateFormat("d MMMM yyyy").MinDate(Model.StartDate).MaxDate(Model.EndDate).AutoSize(true)
                </li>
            </ul>
            @Html.JQueryUI().Button("Update")
        </fieldset>
    }
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">

        $(document).ready(function(){  
            $("#StartDate").attr('readonly', true);
            $("#EndDate").attr('readonly', true);
        });

        $(document).ready(function () {
            $("#SeasonId").change(function () {

                $.ajax({
                    type: 'GET',
                    url: '/League/_GetSeasonDates/?idString=' + $("#SeasonId").val(),
                    success: function (result) {

                        var parsedStartDate = $.datepicker.parseDate('yy-mm-d', result.startDate);
                        var parsedEndDate = $.datepicker.parseDate('yy-mm-d', result.endDate);

                        $("#StartDate").datepicker("option", "minDate", parsedStartDate);
                        $("#StartDate").datepicker("option", "maxDate", parsedEndDate);
                        $("#StartDate").datepicker("setDate", parsedStartDate);

                        $("#EndDate").datepicker("option", "minDate", parsedStartDate);
                        $("#EndDate").datepicker("option", "maxDate", parsedEndDate);
                        $("#EndDate").datepicker("setDate", parsedEndDate);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                    }
                });

                return false;
            });
        });
    </script>
}


